Vue3 基礎課程

作者

Vue3 基礎課程

參考:楊鈞元 Charles Vue3基礎課程
https://hackmd.io/@GDSC-NYUST/SkiZJXPZ6/%2Fu_Ujxb_eRii_XEKV0DetHg#/

前言

一個平易近人、高效能且多功能的漸進式JavaScript 框架用於建立面向於 Desktop, Mobile, WebGL, Terminal 應用程式的前端 Vue.js 基於標準的 HTML、CSS 和 JavaScript 因此最廣泛應用就是用在建立網頁

無須任何建置就單純增強 html 檔案
作為 Web 元件遷入到任何頁面上
Single-Page Application (SPA)：在使用網站時，只載入一個頁面，在網頁更新時渲染頁面，不需重新加載
Fullstack / Server-Side Rendering (SSR)：從伺服器端取得資料，再繪製出完整的 HTML 頁面，有助提高搜尋引擎優化和初次載入性能
Jamstack / Static Site Generation (SSG)：靜態網站生成：在部署前生成靜態 HTML，不需要在瀏覽器或服務器上進行渲染

如果想要更深入了解關於...

到這邊我們來說明一下什麼是前端什麼是後端

Directive (指令)

Content Directives (內容指令)
Rendering Directives (渲染指令)
Attribute Directives (屬性指令)

Content Directives (內容指令)

v-text：等同 JS 的 textContent

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

v-html：等同 JS 的 innerHTML 要注意使用，僅用於受信任的內容，切勿用於使用者提供的內容。否則容易導致 XSS 攻擊 🔗 初探XSS: 攻擊及防禦

Rendering Directives (渲染指令)

v-for：多次渲染 element 或 template block

<template>
  <div>
    <h1>購物車</h1>
    <ul>
      <li v-for="product in cart" :key="product.id">
        {{ product.name }} - {{ product.price }} 元
      </li>
    </ul>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const cart = ref([
    { id: 1, name: '商品一', price: 100 },
    { id: 2, name: '商品二', price: 150 },
    { id: 3, name: '商品三', price: 200 },
  ]);
</script>

想想看，為什麼不直接寫在 template 裡面，而寫在 <script setup>，再傳遞給 <template>？

v-if
v-else-if

v-else 同程式語言的 if...else if...else 達成指定條件才會渲染內容

```html=
<script setup>
  import { ref } from 'vue';

  const status = ref('');
</script>

<template>
  <div>
    <label for="statusSelect">選擇狀態：</label>
    <select id="statusSelect" v-model="status">
      <option value="success">成功</option>
      <option value="loading">載入中</option>
      <option value="error">錯誤</option>
    </select>

    <p>
      狀態：
      <span v-if="status === 'success'">✅操作成功！</span>
      <span v-else-if="status === 'loading'">💭載入中....</span>
      <span v-else>❌錯誤</span>
    </p>
  </div>
</template>
```

v-show：一律渲染並隱藏，達成指定條件才會顯示

<script setup>
  import { ref } from 'vue';

  const isVisible = ref(false);
</script>

<template>
  <div>
    <button @click="isVisible = !isVisible">切換顯示</button>

    <div v-show="isVisible">
      <p>這是可切換顯示的內容。</p>
    </div>
  </div>
</template>

v-if 跟 v-show 的使用取捨

v-if 在條件達成的時候才渲染內容
v-show 先渲染好，條件達成後從隱藏改為顯示

預先準備好能確保使用者達成條件時馬上看到內容，
但如果內容過於大量，
那預先加載過多使用者不會都需要查看的內容，
反而會導致浪費在預先加載的等待時間

Props Directives (屬性指令)

v-bind：動態決定 element 的 props

<script setup>
  import { ref } from 'vue';
  const customColor = ref('red');
</script>

<template>
  <input type="text" v-model="customColor" />
  <p v-bind:style="`color:${customColor}`">hello</p>
  <p :style="`color:${customColor}`">hello</p>
</template>

大家可以在這個網站上試試看基礎指令

再來我們來裝nuxt

基本上按照官網做就行

我還是把步驟打上來

先創一個資料夾
然後進到cmd下

npx nuxi@latest init <project-name>

用npm安裝
裝完後到資料夾內打開cmd下

npm install

然後用vscode打開

code .

再新增一個terminal再裡面打

npm run dev

如果有成功跳出一段網址然後網頁長這樣的恭喜你成功安裝完nuxt了

網頁裡面的資料是在一個app.vue裡面這裡我們先把app.vue刪掉

在外面新增一個叫pages的資料夾裡面分別新增如下

在index.vue裡輸入

<template>
    <div>
        <h2>I am Home page</h2>
        <p>Today is my birthday,
            Today is not my birthday. </p>
        <p>Today is not my birthday,
            Today is my birthday.</p>    
    </div>
</template>

在about.vue輸入

<template>
    <div>
        <h2>I am about page</h2>
        <p>You should give me a gift,
            you should not me give a gift. 
        </p>
        <p>You should not give me a gift,
            you should give me a gift.
        </p>    
    </div>
</template>

這兩個應該沒有看不懂吧

在網頁的部分重新整理應該會出現index.vue的內容

在網頁後面加上/about會出現about.vue的內容

到這邊可以試試剛剛v- ...的效果

如果你們有興趣的話可以到這個yutuber的頻道下面看有很多關於vue的知識 https://www.youtube.com/watch?v=ovJfnoqUBk8&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=4

今天講的東西在不論是在網頁前端或網頁後端都是講很皮毛的部分（真的非常非常皮）如果要想要成為像我們副組長大帥哥或是像寫我們網管網頁及架構的莫格學長或是我們網管北科分布的學長一樣用vue寫學習歷程只能在多寫一點網站增加自己的實力

お疲れ様です。おわり

順帶一提有個網站大家可以去註冊用看看 https://codepen.io/your-work/ 在這個網站上有正常的三巨頭跟vue 可以試試看

Vue3 基礎課程

前言​

Directive (指令)​

Content Directives (內容指令)​

Rendering Directives (渲染指令)​

v-if 跟 v-show 的使用取捨​

Props Directives (屬性指令)​

這兩個應該沒有看不懂吧​

前言

Directive (指令)

Content Directives (內容指令)

Rendering Directives (渲染指令)

v-if 跟 v-show 的使用取捨

Props Directives (屬性指令)

這兩個應該沒有看不懂吧